{% extends 'base.j2' %}

{% block title %}{{ account.fullname or 'Accounts' | display }}{% endblock title %}

{# Account layer navigator in navbar header #}
{% block account_header %}
  <div class="breadcrumb gnc-account-nav py-2 my-0 mx-4">
    {% for parent_account in account | parentaccounts -%}
      {% if loop.first and loop.last -%}
        <div class="breadcrumb-item active">All Accounts</div>
      {%- elif loop.last -%}
        <div class="breadcrumb-item active">{{ parent_account.name | display }}</div>
      {%- elif not loop.first -%}
        <a class="breadcrumb-item link d-inline-block text-truncate"
           style="max-width: 500px"
           href="{{ parent_account | accounturl }}">
          {{ parent_account.name | display }}
        </a>
      {%- endif -%}
    {%- endfor %}
  </div>
{% endblock account_header %}

{% block content %}
  <div id="total" class="my-2 list-group">
    {% if account.parent %}
      <div class="list-group-item">
        <b>Total</b>
        <span class="float-end">
          {{ account.get_balance() | money(account.commodity) }}
        </span>
      </div>
    {% endif %}
  </div>

  {% if account.children %}
    <div id="subaccounts" class="my-2 list-group">
      {# Display all subaccounts in a collapsed tree view #}
      {% for account in account.children | sort(attribute='name') recursive %}

        {# Accounts with children are collapsed list group items toggling visibility of the subtree  #}
        <div class="list-group-item list-group-item-action text-break
                    {% if account.children %}collapsed bi gnc-superaccount{% else %}gnc-leafaccount{% endif %}"
             style="overflow: hidden"
             {% if account.children %}
               role="button"
               data-bs-toggle="collapse"
               href="#{{ account.fullname | cssescape }}"
             {% endif %}>

          <a {% if account.placeholder %}class="link-secondary"{% endif %} href="{{ account | accounturl }}">
            {{ account.name | display }}
          </a>

          <span class="float-end">
            {{ account.get_balance() | money(account.commodity) }}
          </span>
        </div>

        {% if account.children %}
          <div class="list-group-item list-group collapse gnc-account-group"
               id="{{ account.fullname }}">
               {{ loop(account.children) }}
          </div>
        {% endif %}
      {% endfor %}
    </div>
  {% endif %}

  {% if not account.placeholder and account.parent %}
    {# Transaction form takes same layout as transaction view #}
    <div id="transaction_form" class="my-2">
      <form id="add_transaction" action="{{ url_for('book.add_transaction') }}" method="post">
        <input class="form-control form-control-sm" type="hidden" name="account_name" value="{{ account.fullname }}">
      </form>

      <div class="row align-items-center justify-content-between gap-0">
        {# Transaction description #}
        <div class="col-9 pe-0">
          <input class="form-control" form="add_transaction"
                 placeholder="Description" name="description" type="text" id="description"
                 required>
        </div>

        {# Amount to be transfered #}
        <div class="col-3 ps-0">
          <input class="form-control" form="add_transaction"
                 placeholder="Value" name="value" type="number"
                 step="{{ 1 / account.commodity.fraction }}"
                 required>
        </div>
      </div>

      <div class="row align-items-center justify-content-between">
        {# Date of the transaction (default today #}
        <div class="col-4 pe-0">
          <input class="form-control" form="add_transaction"
                 name="date" type="date" value="{{ today.isoformat() }}"
                 required>
        </div>

        {# Selectable contra accounts are all other account of the same commodity, which are not placeholders #}
        <div class="col-8 ps-0">
          <select class="form-select" form="add_transaction" name="contra_account_name" id="add_transaction-contra_account_name">
            {% for contra_account in book.accounts
              | rejectattr('fullname', 'eq', account.fullname)
              | selectattr('commodity', 'eq', account.commodity)
              | rejectattr('placeholder')
              | sort(attribute='splits.length,fullname') %}
              <option value="{{ contra_account.fullname }}" {% if contra_account.fullname == config.PRESELECTED_CONTRA_ACCOUNT %}selected=true{% endif %}>
                {{ contra_account.fullname | display }}
              </option>
            {% endfor %}
          </select>
          <script>
            document.addEventListener("DOMContentLoaded", function() {
              $("select#add_transaction-contra_account_name").removeClass("form-select");
              $("select#add_transaction-contra_account_name").selectize({
                maxItems: 1,
                items: ["{{ config.PRESELECTED_CONTRA_ACCOUNT }}"],
              });
            });
          </script>
        </div>
      </div>

      {# Submit button #}
      <div class="row">
        <div class="d-grid">
          <button class="btn btn-primary btn-sm" form="add_transaction" type="submit">Add Transaction</button>
        </div>
      </div>
    </div>

    {% macro pagenav(current_page, num_pages) %}
      {% if num_pages > 1 %}
        <nav aria-label="Transaction pages" class="my-2">
          <ul class="pagination justify-content-center">
            <li class="page-item {% if page==1 %}disabled{% endif %}">
              <a class="page-link" href="{{ account | accounturl(page=page-1) }}">Previous</a>
            </li>
            {% for p in range(1,num_pages+1) %}
              <li class="page-item {% if p==page %}active{% endif %}">
                <a class="page-link" {% if p!=page %}href="{{ account | accounturl(page=p) }}"{% endif %}>{{ p }}</a>
              </li>
            {% endfor %}
            <li class="page-item {% if page==num_pages %}disabled{% endif %}">
             <a class="page-link" href="{{ account | accounturl(page=page+1) }}">Next</a>
            </li>
          </ul>
        </nav>
      {% endif %}
    {% endmacro %}

    <div id="transactions" class="my-2">
      {% for split in account.splits | sort(attribute='transaction.post_date,transaction.num,transaction.enter_date', reverse=True) | slice(num_pages) | nth(page-1) %}
        <div class="{% if loop.index % 2 %}bg-light{% endif %} border-top {% if loop.last %}border-bottom{% endif %}">
          {% include 'transaction.j2' %}
        </div>
      {% endfor %}
      {{ pagenav(page, num_pages) }}
    </div>
  {% endif %}
{% endblock content %}
